<template>
  <el-dialog
    :title="title"
    :visible.sync="visible"
    width="30%"
    destroy-on-close
  >
    <el-form
      ref="form"
      :model="formInfo"
      label-width="100px"
      v-loading="loading"
      :rules="rules"
    >
      <el-form-item label="角色名称:" prop="roleName">
        <el-input v-model="formInfo.roleName"></el-input>
      </el-form-item>
      <el-form-item label="角色编码:" prop="roleCode">
        <el-input v-model="formInfo.roleCode"></el-input> </el-form-item
      ><el-form-item label="角色描述:">
        <el-input v-model="formInfo.description"></el-input>
      </el-form-item>
    </el-form>
    <span slot="footer" class="dialog-footer">
      <el-button @click="visible = false">取 消</el-button>
      <el-button
        v-if="title === '新增'"
        type="primary"
        @click="submit(url.add, 'Post')"
        >新 增</el-button
      >
      <el-button
        v-if="title === '编辑'"
        type="primary"
        @click="submit(url.edit, 'Put')"
        >保 存</el-button
      >
    </span>
  </el-dialog>
</template>

<script>
import formApi from "@/api/common/formApi";
export default {
  name: "RoleModel",
  components: {},
  filters: {},
  data() {
    return {
      title: "",
      visible: false,
      formInfo: {
        roleName: "",
        roleCode: "",
        description: "",
        isDelete: 0,
      },
      defaultFormInfo: {
        roleName: "",
        roleCode: "",
        description: "",
        isDelete: 0,
      },
      url: {
        add: "/system/sys-role/add",
        edit: "/system/sys-role/edit",
      },
      loading: false,
      rules: {
        roleName: [
          { required: true, message: "请输入角色名称", trigger: "blur" },
          {
            min: 1,
            max: 100,
            message: "长度在 1 到 100 个字符",
            trigger: "blur",
          },
        ],
        roleCode: [
          { required: true, message: "请输入角色编码", trigger: "blur" },
          {
            min: 1,
            max: 100,
            message: "长度在 1 到 100 个字符",
            trigger: "blur",
          },
        ],
      },
    };
  },
  created() {
    //备份默认值
    // this.defaultFormInfo = JSON.parse(JSON.stringify(this.formInfo));
  },
  methods: {
    //新增
    add() {
      //用于清空表单
      this.formInfo = Object.assign({}, this.defaultFormInfo);
    },
    //编辑
    edit(formInfo) {
      this.formInfo = Object.assign({}, formInfo);
    },
    //提交表单
    submit(url, method) {
      this.$refs["form"].validate((valid) => {
        if (valid) {
          this.loading = true;
          formApi.formRequest(url, method, this.formInfo).then(
            (res) => {
              console.log(res);
              this.$message({
                message: "操作成功",
                type: "success",
              });
              this.loading = false;
              this.visible = false;
              this.$parent.handleOK();
            },
            (err) => {
              console.log(err);
              this.$message.error("操作失败");
              this.loading = false;
              this.visible = false;
            }
          );
        } else {
          this.$message.error("请检查输入");
          return false;
        }
      });
    },
  },
};
</script>
